<template>
  <div class="bac">
    <!-- 版心 -->
    <div class="container">
      <!-- <div class="zdy-nav">
        <span class="zdy-back"></span>
        <span class="zdy-login"></span>
      </div>-->
      <!-- 登录表单 -->
      <van-form @submit="onSubmit">
        <h1 class="zhuce-font">登录</h1>
        <van-field
          v-model="formData.u_email"
          name="邮箱"
          left-icon="/img/icon/email.png"
          placeholder="请输入邮箱"
          :rules="[{ required: true, message: '邮箱不能为空' }]"
        />
        <!-- <van-divider /> -->
        <van-field
          v-model="formData.u_pwd"
          type="password"
          name="密码"
          left-icon="/img/icon/pwd.png"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '密码不能为空' }]"
        />
        <div style="margin: 16px;">
          <van-button type="primary" round block native-type="submit">登录</van-button>
          <van-button type="info" round block native-type="submit" @click="toRegister">注册</van-button>
        </div>
      </van-form>
      <!-- 其他登录方式 -->
      <div class="zdy-bottom">
        <!-- 分割线 -->
        <van-divider style="margin:1rem 0">其他登录方式</van-divider>
        <van-grid :border="false" :column-num="3" icon-size="3rem" direction="horizontal">
          <van-grid-item icon="/img/icon/qq.png" />
          <van-grid-item icon="/img/icon/weibo.png" />
          <van-grid-item icon="/img/icon/chat.png" />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        u_email: "",
        u_pwd: ""
      }
    };
  },
  methods: {
    toRegister() {
      this.$router.replace("/register");
    },
    onSubmit(values) {
      console.log("submit", values);
      this.http
        .post(this.$api.login, this.formData)
        .then(res => res.data)
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            sessionStorage.setItem("user", JSON.stringify(res?.data));
            sessionStorage.setItem("token", res?.data?.token);
            this.$router.replace("/home");
            this.$msg.success("登录成功");
          } else {
            this.$msg.fail("登录失败");
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.bac {
  display: flex;
  height: 100vh;
  background: url("/public/img/background/reg_bg.jpg");
  background-color: #f7f7f7;
  background-size: 100vw 24rem;
  background-repeat: no-repeat;
}
.van-cell-group {
  border-radius: 1rem;
  border: none;
  padding: 4rem;
  margin-top: 6rem;
  clear: both;
}

.zdy-bottom {
  background-color: #f7f7f7;
}

.van-button--primary {
  background-color: #fecb1c;
  border: none;
}
.van-button--info {
  margin-top: 1rem;
  background-color: #ccc;
  border: none;
}

.van-field__control,
.van-field__error-message {
  margin-left: 2rem;
  background-color: #f7f7f7 !important;
}
.van-cell {
  display: flex;
  align-items: center;
}
.container {
  width: 34rem;
  margin: 1rem auto;
  margin-top: 10rem;
}
.zhuce-font {
  font-size: 1.6rem;
  color: #fecb1c;
  text-align: center;
  margin-bottom: 1rem;
  padding-top: 1rem;
}
.van-form {
  background-color: #fff;
  padding: 2rem;
  border-radius: 1rem;
}
.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border: none;
}
</style>